import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm,DatePicker, Select,  } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;

import AddModal from '../../components/report/AddModal';
import ViewModal from '../../components/report/ViewModal';
import ViewPlanModal from '../../components/report/ViewPlanModal';

function ReportPlan ({ dispatch, reportPlan, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const { currentItem, modalVisible, modalType,cycletime,newKey,condition,isShow,assetTypeTree,roomList,assetBrandList,assetModelList,rackList,
        manageDeptTree,useDeptTree,userList,brandId,typeId,detailCurrent,detailCurrentSize,detailTotal,detailList,viewModalType,viewModalVisible,
        currentDetailItem,viewItem,modalViewType,viewItemModalVisible,confirmLoading,obj,isShowTime} = reportPlan

    const columns = [{
        title: '模板名称',
        dataIndex: 'name',
        key: 'name',
        width: 120,
    },{
        title: '模板类型',
        dataIndex: 'type',
        key: 'type',
        width: 100,
        render: (value, row, index) => {
            return (
                value==1?"自动生成":value==2?"手动生成":""
            )
        }
    },{
        title: '重复周期',
        dataIndex: 'cycleType',
        key: 'cycleType',
        width: 80,
        render: (value, row, index) => {
            return (
                value==1?"每天":value==2?"每周":value==3?"每月":""
            )
        }
    },{
        title: '统计参数',
        dataIndex: 'statisticsCondition',
        key: 'statisticsCondition',
        width: 150,
    },{
        title: '创建人',
        dataIndex: 'createName',
        key: 'createName',
        width: 100,
    },{
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 120,
    },{
        title: '操作',
        key: 'operation',
        width: 200,
        render: (text, record) => (
            <span>
                <span>
                    <a onClick={onViewItem.bind(null, record.id_)}>查看详情</a>
                </span>
                <span className="ant-divider" />
                <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                <a>删除</a>
                </Popconfirm>
                <span className="ant-divider" />
                <span>
                    <a onClick={onViewSheet.bind(null, record.id_,record.name)}>查看报表</a>
                </span>
                <span className="ant-divider" />
                <span>
                    <a onClick={onCreateSheet.bind(null, record.id_)}>生成报表</a>
                </span>
            </span>
        ),
    }];

    const pagination = {
        current:reportPlan.current,
        pageSize:reportPlan.currentSize,
        total: reportPlan.total,
        showSizeChanger: true,
        showTotal: (total => '共' + reportPlan.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'reportPlan/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
            });
        },
        onChange(current) {
            dispatch({
                type: 'reportPlan/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':reportPlan.currentSize} },
            });
        },
    };

    const submitHandle = () => {
        dispatch({
            type: 'reportPlan/queryList',
            payload: { ...getFieldsValue() },
        });
    }

    function handleClear(){
      form.resetFields();
    }
    //查看盘点单
    const onViewSheet = (id,name) => {
        dispatch({
            type: 'reportPlan/onViewSheet',
            payload:{templetId:id,name:name,pageSize:10},
        })
    }
       //查看盘点单
    const onCreateSheet = (id) => {
        dispatch({
            type: 'reportPlan/onCreateSheet',
            payload:{id:id},
        })
    }
    const addHandler = () => {
        dispatch({
            type: 'reportPlan/upState',
            payload: {
                modalType: 'create',
                newKey : new Date().getTime() + '' ,
                modalVisible: true
            },
        })
        dispatch({
            type: 'reportPlan/queryAssetType',
        })
        dispatch({
            type: 'reportPlan/queryRoom',
        })
        dispatch({
            type: 'reportPlan/queryAssetBrand',
        })
        dispatch({
            type: 'reportPlan/qryManageDepts',
        })
        dispatch({
            type: 'reportPlan/qryUseDepts',
        })
    }

    function deleteHandler(id) {
        dispatch({
            type: 'reportPlan/remove',
            payload: id,
            search:{...getFieldsValue(),...{'pageNum':reportPlan.current, 'pageSize':reportPlan.currentSize}}
        });
    }

    function onViewItem(id) {
        dispatch({
            type: 'reportPlan/qryById',
            payload: id,
        });
        
    }
  
    const modalProps = {
        item: modalType === 'create' ? {} : currentItem,
        cycletime:cycletime,
        condition:condition,
        isShow:isShow,
        isShowTime:isShowTime,
        visible: modalVisible,
        assetTypeTree:assetTypeTree,
        roomList:roomList,
        assetBrandList:assetBrandList,
        assetModelList:assetModelList,
        rackList:rackList,
        manageDeptTree:manageDeptTree,
        useDeptTree:useDeptTree,
        userList:userList,
        typeId:typeId,
        brandId:brandId,
        type: modalType,
        dispatch:dispatch,
        maskClosable: false,
        confirmLoading: loading,
        title: `${modalType === 'create' ? '新增报表模板' : '编辑报表模板'}`,
        wrapClassName: 'vertical-center-modal',
        newKey : newKey,
        onOk (data) {
            dispatch({
                type: `reportPlan/${modalType}`,
                payload: data,
            })
        },
        onCancel () {
            dispatch({
                type: 'reportPlan/upState',
                payload: {
                    isShow:false,
                    newKey : new Date().getTime() + '' ,
                    modalVisible: false,
                    cycletime:{ cycleType: 1, reportPlanList:[],},
                    condition:{},
                    isShowTime:2
                },
            })
        },     
    }

    const viewModalProps = {
        visible: viewModalVisible,        
        confirmLoading: loading,
        currentDetailItem:currentDetailItem,
        detailList:detailList,
        dispatch:dispatch,
        detailCurrent:detailCurrent,
        detailCurrentSize:detailCurrentSize,
        detailTotal:detailTotal,
        maskClosable: false,
        title: viewModalType === 'view' ? <div style={{fontSize:'16px'}}><span>报表计划名称:{currentDetailItem.name}</span></div>:'',
        wrapClassName: 'vertical-center-modal',
        newKey : newKey,
        onCancel () {
            dispatch({
                type: 'reportPlan/upState',
                payload: {
                    viewModalVisible: false,
                    detailList:[],
                    detailCurrent:1,
                    detailCurrentSize:10,
                    detailTotal:0
                },
            })
        },
    }

    const viewPlanModalProps = {
        visible: viewItemModalVisible,
        item:viewItem,
        cycletime:cycletime,    
        obj:obj,
        dispatch:dispatch,
        maskClosable: false,
        title: <div style={{fontSize:'16px'}}><span>报表计划名称:{viewItem.name}</span></div>,
        wrapClassName: 'vertical-center-modal',
        newKey : newKey,
        onCancel () {
            dispatch({
                type: 'reportPlan/upState',
                payload: {
                    viewItemModalVisible: false,
                    viewItem:{},
                    obj:{},
                    cycletime:{ cycleType: 1, reportPlanList:[],},
                },
            })
        },
    }

    return (
         <div style={{backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>
              <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
                  <Form layout="inline" >   
                   <FormItem>
                      {getFieldDecorator('name')(
                          <Input type="text" placeholder="报表计划名称" style={{ width:'200px' }} />
                      )}
                    </FormItem>                     
                    <FormItem>
                            {getFieldDecorator('type')(
                            <Select
                                showSearch
                                style={{ width: 100 }}
                                placeholder="选择类型"
                                optionFilterProp="children"
                        >
                              <Option value="">全部</Option>
                              <Option value="1">自动</Option>
                              <Option value="2">手动</Option>
                            </Select>
                        )}
                    </FormItem>      
                    <FormItem>
                            {getFieldDecorator('cycleType')(
                            <Select
                                showSearch
                                style={{ width: 100 }}
                                placeholder="选择周期"
                                optionFilterProp="children"
                        >
                              <Option value="">全部</Option>
                              <Option value="1">每天</Option>
                              <Option value="2">每周</Option>
                              <Option value="3">每月</Option>
                            </Select>
                        )}
                    </FormItem>  
                    <FormItem>
                           {getFieldDecorator('createTime')(
                                <RangePicker style={{ width:'300px' }}  format="YYYY-MM-DD" />
                            )}
                    </FormItem>

                    <FormItem>
                        <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                    </FormItem>
                    <FormItem>
                        <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                    </FormItem>

                    <div style={{marginTop:'-40px',textAlign:'right',paddingRight:'10px'}}>
                        <FormItem>
                            <Button type="primary" size='large' onClick={addHandler}>制定模板</Button>
                        </FormItem>
                    </div>
                </Form>
            </div>

            <div style={{width:'100%',padding:"30px 20px",}}>
                <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={reportPlan.list} pagination={pagination}
                scroll={{ y: document.body.clientHeight - 218 }}
                />
            </div>
            </div>
            <AddModal {...modalProps} />
            <ViewModal {...viewModalProps} />
            <ViewPlanModal {...viewPlanModalProps} />
              
        </div>
    );
}

function mapStateToProps(state) {
  return {  reportPlan: state.reportPlan,loading:state.loading.models.reportPlan};
}

ReportPlan = Form.create()(ReportPlan);
export default connect(mapStateToProps)(ReportPlan);
